<!doctype html>
<html>

  <head>
    <meta charset="utf-8">
    <title></title>
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    <link href="css/mui.css" rel="stylesheet" />
  </head>

  <body>
    <header class="mui-bar mui-bar-nav">
      <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
      <h1 class="mui-title">这是选择支付方式页面</h1>
    </header>
    
    <div class="mui-content">
      <h2>支付的金额</h2>
      <div>
        <input type='tel' value='0.01' id="price"/><span>元</span>
      </div>
      <div id="paylist">
        <input type="button"  value="微信支付" class="pay" id="wxpay"/>
        <input type="button"  value="支付宝支付" class="pay" id="alipay"/>
      </div>
    </div>
    
    <ul class="mui-table-view">
      <li class="mui-table-view-cell">
        <a class="mui-navigate-right">支付方式:<span id="channel"></span></a>
      </li>
      <li class="mui-table-view-cell">
        <a class="mui-navigate-right">支付金额:<span id="total_fee"></span></a>
      </li>
      <li class="mui-table-view-cell">
        <a class="mui-navigate-right">支付订单号:<span id="bill_no"></span></a>
      </li>
      <li class="mui-table-view-cell">
        <a class="mui-navigate-right">支付状态:<span id="status"></span></a>
      </li>
    </ul>
    
    <script src="js/mui.js"></script>
    <script src="./payment.js"></script>
    <script type="text/javascript">
      mui.init()
      mui.plusReady(function () {
        //支付金额
        var total_fee=document.getElementById('total_fee')
        var price=document.getElementById('price')
        //支付订单号
        var bill_no=document.getElementById('bill_no')
        //支付状态
        var status=document.getElementById('status')
        //支付方式
        var channel=document.getElementById('channel')
        //事件代理
          mui('#paylist').on('tap','.pay',function(e){
            // console.log(payment)
            var channel_id=null
            switch(e.target.id){
              case 'alipay':
                    channel_id="ALI_APP";
                    break;
              case 'wxpay':
                    channel_id="WX_APP";
                    break;
              default:
                    break;
            }
            //支付金额赋值 
            total_fee.innerHTML=price.value
            //订单号在公司中是后端生成给前端的，本案例自己模拟生产
            // console.log(payment)
            bill_no.innerHTML=payment.orderNumber()
            //支付方式
            channel.innerHTML=channel_id
            
            var payData={
              app_id:'44f01a13-965f-4b27-ba9f-da678b47f3f5',
              channel: channel_id, //支付: ALI_APP 微信: WX_APP
              title: '我买了一个鸡',
              total_fee: price.value*100,//数值
              bill_no: payment.orderNumber()//字符串
            }
            
            //支付完整过程=>1先请求 2在唤醒第三方支付方式
            payment.payReq(payData,function(){
              //付款成功后的代码
              status.innerHTML='付款成功'
            },function(){
              //付款失败
              status.innerHTML='付款失败'
            })
          })
      })
    </script>
  </body>

</html>
